<template>
	<view>
		<c-navBar title=""></c-navBar>
		<view class="conten-box">
			<view class="avatar-box">
				<image :src="parmas.avatar" class="avatar-url"></image>
				<view class="avatar-edit" @click="editImg">
					<image class="avatar-edit-img" src="../../static/edit.png" mode=""></image>
				</view>  
			</view> 
			<text class="title">个人信息</text> 

			<view class="from-box">
				<uni-forms ref="form" validate-trigger="bind" :rules="formRules" :modelValue="parmas" label-width="0px">



					<uni-forms-item label="" name="nickname">
						<view class="c-row">
							<view span="24" class="col-1">
								<text class="from-lable">个人姓名</text> 
							</view>
							<view span="24" class="col-2">
								<view class="from-input">
									<input v-model="parmas.nickname" class="uni-input"  placeholder="请输入个人姓名" />
								</view>
							</view>
						</view>
					</uni-forms-item>

					<uni-forms-item label="" name="contact_phone">
						<view class="c-row">
							<view span="24" class="col-1">
								<text class="from-lable">联系电话</text>
							</view>
							<view span="24" class="col-2">
								<view class="from-input">
									<input v-model="parmas.contact_phone" class="uni-input" 
										placeholder="请输入联系电话" />
								</view>
							</view>
						</view>
					</uni-forms-item>


					<uni-forms-item label="" name="address">
						<view class="c-row">
							<view span="24" class="col-1">
								<text class="from-lable">联系地址</text>
							</view>
							<view span="24" class="col-2">
								<view class="from-input">
									<input v-model="parmas.address" class="uni-input"  placeholder="请输入联系地址" />
								</view>
							</view>
						</view> 
					</uni-forms-item> 

				</uni-forms> 
				<view class="btn-box">
					<view class="btn-1" @click="close">
						取消
					</view>
					<view class="btn-2" @click="save">
						保存
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		editSchoolInfo
	} from "@/apis/user.js"
	import {
		reactive,  
		ref 
	} from "vue";
	import { 
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	// englishUserInfo
	import {
		formRules
	} from "./js/userinfo.js"
 
	onShow(() => {
		let detail = JSON.parse(uni.getStorageSync('englishUserInfo'))
		parmas.avatar = detail.avatar_url 
		parmas.nickname = detail.nickname
		parmas.contact_phone = detail.contact_phone ? detail.contact_phone : ''
		parmas.address = detail.address
		console.log(detail)
		// parmas=detail 
	}) 
	const form = ref(null)
	const parmas = reactive({
		avatar: '',
		nickname: '',
		contact_phone: '',
		address: ''
	})
	const loading = ref(false)
	const close = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const save = async () => {

		form.value.validate().then(valid => {
			// console.log(valid) 
			sbmit() 
		}).catch(err => {
			console.log(err);
		})
	}
	const sbmit = async () => {
		if (loading.value) {
			return
		}
		loading.value = true
		let data = await editSchoolInfo(parmas)
		if (data) {
			uni.showToast({
				icon: 'none',
				title: '保存成功',
				duration: 2000
			});
		}
		loading.value = false
	}
	const editImg = () => {
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: 'https://haici.snooowball.cn/api/user/uploadImg', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
						// 'user': 'test' 
					},
					success: (uploadFileRes) => {
						let datas = JSON.parse(uploadFileRes.data)
						console.log(datas.data.url);
						parmas.avatar = datas.data.url
					}
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.conten-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 40rpx;
	}

	.avatar-box {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		opacity: 1;
		// background: url(https://img.js.design/assets/img/6221b42d71fabe59c8f05435.png);
		box-shadow: 1.75rpx 8.76rpx 26.29rpx rgba(144, 129, 242, 0.15);
		border-radius: 50%;

		.avatar-url {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
		}
	}

	.avatar-edit {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: -35rpx;
		bottom: 50rpx;
		width: 70rpx;
		height: 70rpx;
		background: linear-gradient(212.05deg, rgba(49, 208, 202, 1) 0%, rgba(56, 191, 218, 1) 100%);
		border-radius: 50%;

		.avatar-edit-img {
			width: 30rpx;
			height: 30rpx;
			margin-left: 6rpx;
		}
	}

	.title {
		width: 100%;
		margin-top: 30rpx;
		padding-left: 30rpx;
		font-weight: bold;
		font-size: 34rpx;
	}

	.from-box {
		width: 674.65rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		padding: 30rpx;
		border: 1.75px solid rgba(108, 86, 249, 0.05);
		border-radius: 24rpx;
		margin-top: 30rpx;
	}

	.col-1 {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.col-2 {
		width: 100%;
		margin-bottom: 30rpx;
	}

	.from-lable {
		font-size: 26rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 31.54px;
		color: rgba(0, 40, 132, 1);
		font-weight: bold;
	}

	.from-input {
		height: 80rpx;
		opacity: 1;
		background: rgba(251, 251, 253, 1);
		padding: 0 20rpx;
		border: 1.75rpx solid rgba(0, 40, 132, 0.05);
		border-radius: 24rpx;

		input {
			height: 80rpx;
		}
	}

	.btn-box {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 100rpx;

		.btn-1,
		.btn-2 {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90rpx;
			opacity: 1;
			background: rgba(251, 251, 253, 1);
			border-radius: 45rpx;
			border: 1.75px solid rgba(0, 40, 132, 0.05);
			font-weight: bold;

		}

		.btn-1 {
			width: 46%;
			color: rgba(176, 188, 218, 1);

		}

		.btn-2 {
			width: 46%;
			background: rgba(61, 150, 253, 1);
			color: #fff;
		}

	}

	:deep(.is-direction-left) {
		width: 100%;
	}
</style>